<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域插槽</title>
   
</head>
<body>
    <div id="app">
       
       <mytable  :header="headers" :data="tables"> 
        <template slot-scope="scope">
            <td>{{scope.row.id}}</td>
            <td>{{scope.row.name}}</td>
            <td>{{scope.row.sides}}</td>
        </template>
        
       </mytable>
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>

        


        Vue.component('mytable',{
            props:['header','data'],
           data:function(){
                return{
                }
                },
            template:`<div>
                <table border='1' >
            <tr>
                <td v-for='he in header'>{{he.lable}}</td>
            </tr>
            <tr v-for='row in data'>
                <slot :row='row'></slot>
            </tr>
            </table>
                </div>`,
            methods:{
            }

        });


        var vm=new Vue({
            el:'#app',
            data:{
               tables:[
                {id:1,name:'正方形',sides:3},
                {id:2,name:'长方形',sides:4},
                {id:3,name:'三角形',sides:5},
                {id:4,name:'圆形',sides:6}
               ],
               headers:[
                {prop:'id',lable:'编号'},
                {prop:'name',lable:'名称'},
                {prop:'sides',lable:'边数'} 
               ]
            }
        })
    </script>
</body>
</html>
